<template>
  <common-container
    :id="id"
    :item="item"
    :item-config="itemConfig"
    @click.stop="selectItem(item)"
    @delete-item="deleteItem"
    @copy-item="copyItem"
  >
    <a-row
      :gutter="config.gutter"
      :justify="config.justify"
      :align="config.align"
      :wrap="config.wrap"
    >
      <template v-for="(col, index) in item.formList" :key="index">
        <grid-col-container
          :id="col.id"
          v-model:list="col.formList"
          v-model:model="formModel"
          :item="col"
          :item-config="col.itemConfig"
          :config="col.config"
          @select-item="selectItem"
          @delete-item="deleteItem"
          @copy-item="copyItem"
        />
      </template>
    </a-row>
  </common-container>
</template>

<script lang="ts" setup>
import { defineEmits, defineModel, defineProps } from 'vue';
import CommonContainer from '@/components/form-design/form-container/container-item/common-container.vue';
import GridColContainer from '@/components/form-design/form-container/container-item/grid-col-container.vue';

const formModel = defineModel();

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const selectItem = (value: any) => {
  emits('selectItem', value);
};

const deleteItem = (value: any) => {
  emits('deleteItem', value);
};

const copyItem = (value: any) => {
  emits('copyItem', value);
};
</script>

<script lang="ts">
export default {
  name: 'GridRowContainer'
};
</script>

<style scoped>

</style>